.ui-migration-bar__scope {

	--color_text: #333;
	--color_link: #a8adb4;

	--font_helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;

	--transition: .2s;
}

.ui-migration-bar__wrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.ui-migration-bar__container {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	padding: 20px 35px;
	background: #d9f6ff;
	border-radius: 10px;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.ui-migration-bar__cross {
	position: absolute;
	top: 7px;
	right: 7px;
	display: block;
	cursor: pointer;
}

.ui-migration-bar__cross-icon {
	display: block;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.254 5l3.254 3.254-1.254 1.254L5 6.254 1.746 9.508.492 8.254 3.746 5 .492 1.746 1.746.492 5 3.746 8.254.492l1.254 1.254L6.254 5z' fill='%23333'/%3E%3C/svg%3E") center no-repeat;
	-webkit-transition: opacity .3s;
	-o-transition: opacity .3s;
	transition: opacity .3s;
	opacity: .1;
}

.ui-migration-bar__cross:hover .ui-migration-bar__cross-icon {
	opacity: .6;
}

.ui-migration-bar__title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.ui-migration-bar__title-name {
	display: block;
	margin-bottom: 12px;
	font: 14px/20px var(--font_helvetica);
	color: var(--color_text);
	text-align: center;
}

.ui-migration-bar__hint-icon {
	display: inline-block;
	margin-top: -3px;
	width: 25px;
	height: 20px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.478 6.49A6.489 6.489 0 10.5 6.488a6.489 6.489 0 0012.978 0zm-8.996-1.7c0-.318.102-.64.306-.966.204-.325.502-.595.893-.81.39-.213.847-.32 1.368-.32.485 0 .912.09 1.283.268.371.18.658.422.86.73.202.307.303.641.303 1.002 0 .284-.057.533-.172.747a2.286 2.286 0 01-.412.554 29.99 29.99 0 01-.854.785 3.475 3.475 0 00-.273.273 1 1 0 00-.231.411 7.53 7.53 0 00-.083.343c-.063.348-.262.522-.596.522a.61.61 0 01-.439-.17c-.119-.114-.178-.283-.178-.507 0-.28.043-.524.13-.73a1.85 1.85 0 01.346-.54 7.92 7.92 0 01.582-.555c.214-.187.368-.328.464-.423.095-.096.175-.202.24-.319a.77.77 0 00.098-.38c0-.268-.1-.494-.298-.677-.2-.184-.456-.276-.77-.276-.368 0-.638.093-.812.278-.174.186-.32.459-.441.82-.114.377-.33.566-.647.566a.635.635 0 01-.474-.198.606.606 0 01-.193-.429zm1.913 5.296a.79.79 0 00.534.198c.197 0 .37-.067.521-.2.15-.134.226-.318.226-.552A.722.722 0 007.46 9a.722.722 0 00-.531-.215.745.745 0 00-.542.215.714.714 0 00-.22.532c0 .237.076.422.228.554z' fill='%23BDC1C6'/%3E%3C/svg%3E") center no-repeat;
	background-size: 13px 13px;
	vertical-align: middle;
	cursor: pointer;
}

.ui-migration-bar__item-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px, -webkit-max-content));
	grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
	grid-gap: 15px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.ui-migration-bar__item {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	max-width: 100%;
	height: auto;
}

.ui-migration-bar__link {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	font: 12px/20px var(--font_helvetica);
	color: var(--color_link);
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	white-space: nowrap;
	cursor: pointer;
}

.ui-migration-bar__link:hover {
	color: var(--color_text);
}

.ui-migration-bar__btn-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin-top: 27px;
	padding-top: 17px;
	border-top: 1px solid rgba(82,92,105,.08);
}
